<template>
  <div class="box">
    <div class="box_left">
      <Common-Slider-Bar
        ref="silderBar"
        :item-view-option="itemViewOption"
        :search-key="'CPROGRAMNAME'"
        :request="{
          url: url + '/dynamicReportForm/queryBodyByProduce',
          method: 'post',
          data: searchData
        }"
        @select="menuChange"
        @fatherSelct="menuChangeFather"
      >
        <template slot="top">
          <el-select
            v-if="flagHide ==='2'&&false"
            v-model="projectAnalysisType"
            class="projectAnalysisType"
            @change="projectAnalysisTypeChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </Common-Slider-Bar>
    </div>
    <div class="box_digital1">
      <breadcrumb class="breadcrumb-container" />
      <div class="box_digital">
        <base-info
          ref="baseInfo"
          :base-info="baseInfo"
          :title="title"
          :note-list="noteList"
          :rate="rate"
          :flag-hide="flagHide"
          :enterprise-name="enterpriseName"
          @btnChange="btnChange"
        />
      </div>
      <div class="box_table">
        <table-common
          :menu-id="menuId"
          :filter-list="filterList"
          :programe="programe"
          :tabs-index="tabsIndex"
          @tabClick="tabClick"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CommonSliderBar from '@/components/CommonSliderBar';
import tableCommon from '@/components/tableCommon/index.vue';
import BaseInfo from './components/BaseInfo.vue';
import baseUrl from '@/utils/processRequest1';
import Breadcrumb from '@/components/Breadcrumb';
// import commonPropertypage from '@/views/commonPropertypage/index';
export default {
  components: {
    BaseInfo,
    tableCommon,
    CommonSliderBar,
    Breadcrumb
    // commonPropertypage
  },
  data() {
    return {
      programe: '',
      menuId: undefined,
      url: '',
      baseInfo: {},
      filterList: [],
      searchData: {},
      ENTERPRISECODEList: [],
      rate: '',
      noteList: [],
      enterpriseName: '',
      itemViewOption: {},
      tabsIndex: '0',
      flagHide: '',
      options: [{ value: 1, label: '项目类型' }, { value: 2, label: '抽查巡查' }],
      projectAnalysisType: 1
      // menuIdTemporary: undefined
      // menuId: 1623551096894
    };
  },
  created() {
    //
    const {
      title,
      ENTERPRISECODE,
      CPROGRAMTYPECODE,
      CRESOURCECODE,
      routeTitle,
      CENTERPRISECODE1
    } = this.$route.query;
    if (title.includes('项目分析')) {
      this.searchData = {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 475,
        resultAsTree: true
        // filterList: [{ col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }]
      };
      // 全区进来
      // XMLX && (this.searchData = {
      //   pageIndex: 0,
      //   pageSize: 100,
      //   pageType: 1,
      //   tableId: 515,
      //   xmlx: 3
      // });
      if (routeTitle && routeTitle.includes('汇总分析')) {
        this.searchData = {
          pageIndex: 0,
          pageSize: 100,
          pageType: 1,
          tableId: 475,
          resultAsTree: true,
          filterList: []
        };
        if (CPROGRAMTYPECODE) {
          if (this.searchData.filterList && this.searchData.filterList.length) {
            this.searchData.filterList = this.searchData.filterList.concat([
              {
                col: 'CPROGRAMTYPECODE',
                value: CPROGRAMTYPECODE
              }
            ]);
          } else {
            this.searchData.filterList = [
              {
                col: 'CPROGRAMTYPECODE',
                value: CPROGRAMTYPECODE
              }
            ];
          }
        }
        if (CRESOURCECODE) {
          if (this.searchData.filterList && this.searchData.filterList.length) {
            this.searchData.filterList = this.searchData.filterList.concat([
              {
                col: 'CRESOURCECODE',
                value: CRESOURCECODE
              }
            ]);
          } else {
            this.searchData.filterList = [
              {
                col: 'CRESOURCECODE',
                value: CRESOURCECODE
              }
            ];
          }
        }
      } else if (routeTitle && routeTitle.includes('乡镇分析')) {
        this.searchData = {
          pageIndex: 0,
          pageSize: 100,
          pageType: 1,
          tableId: 475,
          resultAsTree: true,
          filterList: []
        };
        if (CPROGRAMTYPECODE) {
          if (this.searchData.filterList && this.searchData.filterList.length) {
            this.searchData.filterList = this.searchData.filterList.concat([
              {
                col: 'CPROGRAMTYPECODE',
                value: CPROGRAMTYPECODE
              }
            ]);
          } else {
            this.searchData.filterList = [
              {
                col: 'CPROGRAMTYPECODE',
                value: CPROGRAMTYPECODE
              }
            ];
          }
        }
        if (CRESOURCECODE) {
          if (this.searchData.filterList && this.searchData.filterList.length) {
            this.searchData.filterList = this.searchData.filterList.concat([
              {
                col: 'CRESOURCECODE',
                value: CRESOURCECODE
              }
            ]);
          } else {
            this.searchData.filterList = [
              {
                col: 'CRESOURCECODE',
                value: CRESOURCECODE
              }
            ];
          }
        }
      }
      if (CENTERPRISECODE1) {
        if (this.searchData.filterList && this.searchData.filterList.length) {
          this.searchData.filterList = this.searchData.filterList.concat([
            {
              col: 'CENTERPRISECODE1',
              value: CENTERPRISECODE1
            }
          ]);
        } else {
          this.searchData.filterList = [
            {
              col: 'CENTERPRISECODE1',
              value: CENTERPRISECODE1
            }
          ];
        }
      }
      this.$route.query.PROGRAMNAME &&
        this.searchData.filterList.push({
          col: 'CPROGRAMNAME',
          value: this.$route.query.PROGRAMNAME,
          symbol: 'eq'
        });
      // this.menuId = 1623565437264;
      this.flagHide = '1';
      this.title = 'CPROGRAMNAME';
      this.noteList = [
        { key: '总预算', value: 'YSS' },
        { key: '总支出', value: 'ZCS' },
        { key: '总结余', value: 'ZJY' }
      ];
      this.rate = 'ZXL';
      this.itemViewOption = {
        itemTitle: 'CPROGRAMNAME',
        key: 'ID',
        menuTitle: 'CPROGRAMNAME'
      };
    } else if (title.includes('两直分析')) {
      this.searchData = {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 492,
        resultAsTree: true,
        filterList: [
          { col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }
        ]
      };
      // this.menuId = 1623734766269;
      this.title = 'PROGRAMNAME';
      this.rate = 'RATE';
      this.noteList = [
        { key: '发放总金额', value: 'MONEY' },
        { key: '执行数', value: 'MONEY2' },
        { key: '资金使用率', value: 'RATE' }
      ];
      this.itemViewOption = {
        itemTitle: 'PROGRAMNAME',
        key: 'PROGRAMNAME',
        menuTitle: 'PROGRAMNAME'
      };
    } else if (title.includes('一卡通')) {
      this.searchData = {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 406,
        resultAsTree: true,
        filterList: [
          { col: 'ENTERPRISECODE', value: this.$route.query.ENTERPRISECODE }
        ]
      };
      // this.menuIdTemporary = 1623138732610;
      // this.menuId = 1623138732610;
      this.title = 'PROGRAMNAME';
      this.rate = 'RATE';
      this.noteList = [
        { key: '发放总金额', value: 'YFJE' },
        { key: '发放总人数', value: 'XZXM_FFZRS' },
        { key: '成功人数', value: 'XZXM_CGRS' },
        { key: '失败人数', value: 'XZXM_SBRS' }
      ];
      this.itemViewOption = {
        itemTitle: 'PROGRAMNAME',
        key: 'PROGRAMNAME',
        menuTitle: 'PROGRAMNAME'
      };
    } else if (title.includes('资金监管')) {
      this.searchData = {
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 554,
        resultAsTree: true,
        filterList: [{ col: 'CENTERPRISECODE1', value: CENTERPRISECODE1 }]
      };
      // this.menuId = 1623734766269;
      this.title = 'CPROGRAMNAME';
      this.noteList = [
        { key: '预算数', value: 'YSS' },
        { key: '已拨付', value: 'ZCS' },
        { key: '总结余', value: 'ZJY' },
        { key: '执行率', value: 'ZXL' }
      ];
      this.flagHide = '2';
      this.itemViewOption = {
        itemTitle: 'CPROGRAMNAME',
        key: 'CPROGRAMNAME',
        menuTitle: 'CPROGRAMNAME'
      };
    }
    this.ENTERPRISECODEList = [
      {
        col: 'ENTERPRISECODE',
        value: ENTERPRISECODE
      }
    ];
    this.init();
  },
  methods: {
    init() {
      baseUrl().then(res => {
        this.url = res.url;
        this.$nextTick(() => {
          this.$refs.silderBar.send();
        });
      });
    },
    menuChange(obj) {
      const { title } = this.$route.query;
      this.baseInfo = obj.value;
      if (title.includes('项目分析')) {
        // this.enterpriseName = obj.value.ENTERPRISENAME;
        this.enterpriseName = obj.value.DIVISION;
        !this.menuId && (this.menuId = 1623565437264);
        // this.filterList = [{ col: 'PROGRAMNAME', value: obj.value.PROGRAMNAME }].concat(this.ENTERPRISECODEList);
        this.filterList = [
          {
            col: 'CENTERPRISECODE1',
            value: obj.value.CENTERPRISECODE1,
            symbol: 'eq'
          },
          { col: 'CPROGRAMNAME', value: obj.value.CPROGRAMNAME, symbol: 'eq' }
        ];
        // if (CPROGRAMTYPECODE) {
        //   if (this.filterList && this.filterList.length) {
        //     this.filterList = this.filterList.concat([
        //       {
        //         col: 'CPROGRAMTYPECODE',
        //         value: CPROGRAMTYPECODE
        //       }
        //     ]);
        //   } else {
        //     this.filterList = [
        //       {
        //         col: 'CPROGRAMTYPECODE',
        //         value: CPROGRAMTYPECODE
        //       }
        //     ];
        //   }
        // }
        // if (CRESOURCECODE) {
        //   if (this.filterList && this.filterList.length) {
        //     this.filterList = this.filterList.concat([
        //       {
        //         col: 'CRESOURCECODE',
        //         value: CRESOURCECODE
        //       }
        //     ]);
        //   } else {
        //     this.filterList = [
        //       {
        //         col: 'CRESOURCECODE',
        //         value: CRESOURCECODE
        //       }
        //     ];
        //   }
        // }
      } else if (title.includes('两直分析')) {
        !this.menuId && (this.menuId = 1623734766269);
        this.filterList = [
          { col: 'PROGRAMNAME', value: obj.value.PROGRAMNAME },
          { col: 'ENTERPRISECODE', value: obj.value.ENTERPRISECODE }
        ];
        // this.filterList = [{ col: 'BUDGETID1', value: obj.value.ID }];
      } else if (title.includes('一卡通') || title.includes('资金监管')) {
        const {
          value: { CPROGRAMNAME }
        } = obj;
        this.programe = obj.value.CPROGRAMNAME;
        !this.menuId && (this.menuId = 1624549153686);
        this.filterList = [
          { col: 'CPROGRAMNAME', value: obj.value.CPROGRAMNAME, symbol: 'eq' },
          { col: 'CENTERPRISECODE1', value: obj.value.CENTERPRISECODE1 }
        ];
        this.$route.query.PROGRAMNAME = CPROGRAMNAME;
      }
    },
    menuChangeFather(obj) {
      const { title } = this.$route.query;
      this.baseInfo = obj.value;
      if (title.includes('项目分析')) {
        const value = this.getBaseInfoValue(obj.value);
        this.enterpriseName = obj.value.ENTERPRISENAME;
        !this.menuId && (this.menuId = 1623565437264);
        this.baseInfo = value;
        // this.filterList = [{ col: 'PROGRAMNAME', value: obj.value.PROGRAMNAME }].concat(this.ENTERPRISECODEList);
        // this.filterList = [{ col: 'CENTERPRISECODE1', value: obj.value.CENTERPRISECODE1 }, { col: 'CPROGRAMNAME', value: obj.value.CPROGRAMNAME, symbol: 'eq'}];
        this.filterList = [
          { col: 'CENTERPRISECODE1', value: obj.value.CENTERPRISECODE1 }
        ];
        //  if (CPROGRAMTYPECODE) {
        //   if (this.filterList && this.filterList.length) {
        //     this.filterList = this.filterList.concat([
        //       {
        //         col: 'CPROGRAMTYPECODE',
        //         value: CPROGRAMTYPECODE
        //       }
        //     ]);
        //   } else {
        //     this.filterList = [
        //       {
        //         col: 'CPROGRAMTYPECODE',
        //         value: CPROGRAMTYPECODE
        //       }
        //     ];
        //   }
        // }
        // if (CRESOURCECODE) {
        //   if (this.filterList && this.filterList.length) {
        //     this.filterList = this.filterList.concat([
        //       {
        //         col: 'CRESOURCECODE',
        //         value: CRESOURCECODE
        //       }
        //     ]);
        //   } else {
        //     this.filterList = [
        //       {
        //         col: 'CRESOURCECODE',
        //         value: CRESOURCECODE
        //       }
        //     ];
        //   }
        // }
      } else if (title.includes('资金监管')) {
        const {
          value: { CPROGRAMNAME }
        } = obj;
        this.programe = obj.value.CPROGRAMNAME;
        !this.menuId && (this.menuId = 1624549153686);
        this.filterList = [
          { col: 'CPROGRAMNAME', value: obj.value.CPROGRAMNAME }
        ];
        this.$route.query.PROGRAMNAME = CPROGRAMNAME;
      }
    },
    getBaseInfoValue(obj) {
      let MONEY1 = 0;
      let MONEY2 = 0;
      let MONEY3 = 0;
      let RATE = 0;
      const length = obj.children.length;
      length &&
        obj.children.forEach(item => {
          item.MONEY1 && (MONEY1 += Number(item.MONEY1));
          item.MONEY2 && (MONEY2 += Number(item.MONEY2));
          item.MONEY3 && (MONEY3 += Number(item.MONEY3));
          item.RATE && (RATE += Number(item.MONEY3.split('%')[0]));
        });
      const objDeal = {
        ...obj,
        MONEY1: MONEY1.toFixed(2),
        MONEY2: MONEY1.toFixed(2),
        MONEY3: MONEY1.toFixed(2),
        RATE: (RATE / length).toFixed(2) + '%'
      };
      return objDeal;
    },
    btnChange(index) {
      this.tabsIndex = index + '';
    },
    tabClick(index) {
      this.$refs.baseInfo.btnFlag = Number(index);
    },
    projectAnalysisTypeChange(value) {
      const {
        CENTERPRISECODE1
      } = this.$route.query;
      if (value === 1) {
        this.searchData = {
          pageIndex: 0,
          pageSize: 100,
          pageType: 1,
          tableId: 554,
          resultAsTree: true,
          filterList: [{ col: 'CENTERPRISECODE1', value: CENTERPRISECODE1 }]
        };
        setTimeout(() => {
          this.$refs.silderBar.send();
        }, 0);
      } else if (value === 2) {
        this.searchData = {
          pageIndex: 0,
          pageSize: 100,
          pageType: 1,
          tableId: 591,
          resultAsTree: true,
          filterList: [],
          outFilterList: [],
          orderBy: 1
        };

        setTimeout(() => {
          this.$refs.silderBar.send();
        }, 0);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
/*像素转换相对单位vw*/
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.box {
  height: 100%;
  display: flex;
  width: 100%;
  .box_left {
    width: 200px;
    // height: calc(100% - 75px);
    background: #ffffff;
     .projectAnalysisType {
      width: 90%;
      padding-left: 10%;
    }
  }
  .box_digital1 {
    padding: px2vw(24px);
    width: calc(100% - 200px);
    // flex: 1;
  }
  .box_digital {
    width: 100%;
    // overflow-y: auto;
    .base_info {
      border-radius: 4px;
      background-color: #fff;
      width: 100%;
      // width: calc(100% - px2vw(24px)*2);
    }
    height: 35%;
    margin-bottom: 24px;
  }
  .box_table {
    background-color: #fff;
    height: calc(65% - 60px);
    width: 100%;
  }
}
</style>
